<template>
  <view class="page">
    <view class="user">
      <image src="/static/logo.png" />
      <view class="user-info">
        <text>易师傅</text>
        <text>你还未开通会员</text>
      </view>
    </view>

    <view class="content">
      <view class="title">会员开通方案</view>
      <view class="option">
        <view
          v-for="(v, k) in options"
          :key="k"
          :class="'option-item ' + (k === current ? 'option-selected' : '')"
          @click="change(k)"
        >
          <text class="option-item-time">{{ v.time }}</text>
          <view class="option-item-price">
            <text>￥</text>
            <text>{{ v.price }}</text>
          </view>
          <text class="option-item-tip">{{ v.tip }}</text>
          <view class="option-item-tag" v-if="v.tag">{{ v.tag }}</view>
        </view>
      </view>

      <view class="button" @click="pay()">
        <text>立即以{{ options[current].price }}元续费</text>
        <text>支付后可立即开具体发票</text>
      </view>
      <view class="agreement">《用户协议》</view>

      <view class="title">会员权益</view>
      <view class="advantage">
        <view class="advantage-item" v-for="(v, k) in advantages" :key="k">
          <view class="advantage-item-icon">
            <image src="/static/logo.png" />
          </view>
          <view class="advantage-item-text">
            <text>{{ v.name }}</text>
            <text>{{ v.desc }}</text>
          </view>
        </view>
      </view>

      <view class="title" style="color: #777; font-size: 14px;">
        注意事项
      </view>
      <view class="notice">
        <text>1. 付费成功后可开具发票,发票开具可进入[个人中心]-[我的发票]进行操作。</text>
        <text>2. 会员权益与手机号相对应,无共享账号</text>
        <text>3. 开通会员前请阅读《用户协议》,会员服务一经开通后不可退款</text>
        <text>4. 严禁使用任何手段爬取本产品数据,一经发现可能面临账号禁用风险</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const options = ref([
  { time: "3个月", price: 499, tip: "折合￥5.4/每天" },
  { time: "半年", price: 699, tip: "折合￥3.8/每天", tag: "最多人买" },
  { time: "一年", price: 999, tip: "折合￥2.7/每天", tag: "最划算" }
]);

const advantages = ref([
  { icon: "/static/logo.png", name: "专属客服", desc: "24小时专属服务" },
  { icon: "/static/logo.png", name: "免费退换", desc: "7天无理由退换" },
  { icon: "/static/logo.png", name: "无限免邮", desc: "国内商品免邮" },
  { icon: "/static/logo.png", name: "心动折扣", desc: "折上95折" }
]);

const current = ref(0); // 当前选中套餐下标

const change = (k) => {
  current.value = k;
};

const pay = () => {
  console.log(`点击支付`, options.value[current.value]);
};
</script>

<style lang="scss">
page {
  background: #53536b;
}

.page {
  width: 100vw;
  padding-top: 50rpx;

  .user {
    display: flex;
    align-items: center;
    background: #dcdde0;
    width: 700rpx;
    margin: auto;
    box-sizing: border-box;
    padding: 0 30rpx;
    border-radius: 20rpx 20rpx 0 0;
    height: 160rpx;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .user-info {
      height: 90rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 15rpx;

      text {
        &:nth-child(1) {
          font-weight: bold;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #777;
        }
      }
    }
  }

  .content {
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx;
    box-sizing: border-box;
    width: 100vw;

    .title {
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
    }

    .option {
      display: flex;
      justify-content: space-between;

      .option-item {
        width: 225rpx;
        height: 280rpx;
        box-sizing: border-box;
        border: 1px solid #999;
        border-radius: 15rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        &:active {
          background: #fff6ed;
          border-color: #f9d7b2;
        }

        .option-item-time {
          font-weight: bold;
          font-size: 14px;
          color: #555;
        }

        .option-item-price {
          font-weight: bold;
          margin: 20rpx 0;
          text {
            &:nth-child(2) {
              font-size: 26px;
            }
          }
        }

        .option-item-tip {
          font-size: 12px;
          color: #999;
        }

        .option-item-tag {
          position: absolute;
          left: -5rpx;
          top: -10rpx;
          font-weight: bold;
          font-size: 14px;
          padding: 5rpx 10rpx;
          border-radius: 12rpx;
          background: red;
          color: #fff;
        }
      }

      .option-selected {
        background: #fff6ed;
        border-color: #f9d7b2;

        .option-item-price {
          color: #333;
        }
      }
    }

    .button {
      background: #f9d7b2;
      height: 100rpx;
      border-radius: 50rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;
      &:active {
        background: #ceb295;
      }

      text {
        &:nth-child(1) {
          font-weight: bold;
          color: #333;
          line-height: 1.5;
        }

        &:nth-child(2) {
          color: #555;
          font-size: 14px;
        }
      }
    }

    .agreement {
      font-size: 14px;
      text-align: center;
      margin-top: 20rpx;
      margin-bottom: 60rpx;
      color: #f5984a;
      &:active {
        color: #9c602f;
      }
    }

    .advantage {
      display: flex;
      flex-wrap: wrap;

      .advantage-item {
        display: flex;
        width: 350rpx;
        margin-bottom: 20rpx;

        .advantage-item-icon {
          border: 1px solid #f9d7b2;
          border-radius: 50%;
          width: 70rpx;
          height: 70rpx;

          image {
            margin: 10rpx;
            width: 50rpx;
            height: 50rpx;
          }
        }

        .advantage-item-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 15rpx;

          text {
            &:nth-child(1) {
              font-size: 14px;
              color: #f5984a;
            }

            &:nth-child(2) {
              font-size: 12px;
              color: #888;
            }
          }
        }
      }
    }

    .notice {
      display: flex;
      flex-direction: column;

      text {
        font-size: 12px;
        color: #888;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>